<template>
  <view class="header-layout">
    <view :style="{ height: sysBarHeight + 'px' }"></view>
    <view
      class="custom-header flex items-center"
      :style="{
        height: barHeight ? barHeight + 'px' : '100rpx',
      }"
    >
      <view
        class="title font-bold mr-3"
        :style="{ 'padding-left': `${leftPadding}px` }"
        >{{ props.title || "标题" }}</view
      >
      <view
        class="search-box bg-white border-[1rpx] border-solid rounded-full flex items-center px-2 border-primary"
      >
        <uni-icons
          class="text-primary mr-2"
          type="search"
          size="24"
          color="#999"
        ></uni-icons>
        <text class="text-[#999]">搜索</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue";
import { useNavBarHeight } from "../../hooks";

const props = defineProps<{
  title: string;
}>();

const { barHeight, sysBarHeight } = useNavBarHeight();

let leftPadding = ref(0);

onMounted(() => {
  if (tt?.getCustomButtonBoundingClientRect) {
    const { left } = tt.getCustomButtonBoundingClientRect();
    leftPadding.value = left;
  }
});
</script>

<style scoped lang="scss">
.header-layout {
  background: linear-gradient(to bottom, transparent, #fff 400rpx),
    linear-gradient(to right, #beecd8 20%, #f4e2db);
  padding: 0 25rpx;
  position: fixed;
  top: 0;
  z-index: 9999;

  width: 100vw;
}
.custom-header {
  height: 100rpx;

  .search-box {
    height: 60rpx;
    padding: 0 24rpx;
  }
}
</style>
